<template>
  <a-layout>
    <a-layout-content>
      <a-row class="grid-demo">
        <a-col :span="20">
          <div id="homeview" style="text-align: center">
            <a-card
              style="text-align: left; background-color: #ffffff"
              title="最新题库"
            >
              <template #extra>
                <a-link>查看更多</a-link>
              </template>
              <a-row
                v-for="i in [0, 1, 2, 3]"
                :gutter="20"
                :style="{ marginBottom: '20px' }"
                :key="i"
              >
                <a-col v-for="j in [0, 1, 2, 3]" :key="j" :span="6">
                  <a-card :bordered="true" :style="{ width: '100%' }" hoverable>
                    <a-row style="background-color: #838493; width: 100%">
                      <img
                        :src="data[i * 4 + j]?.picture"
                        height="50px"
                        width="50px"
                      />
                    </a-row>
                    <a-typography-title :heading="5">
                      {{ data[i * 4 + j]?.title }}
                    </a-typography-title>
                    <a-typography-title :heading="7">
                      {{ getDescription(i * 4 + j) }}
                    </a-typography-title>
                  </a-card>
                </a-col>
              </a-row>
            </a-card>
            <a-card
              style="
                text-align: left;
                background-color: #ffffff;
                margin-top: 50px;
              "
              title="最新题目"
            >
              <template #extra>
                <a-link>查看更多</a-link>
              </template>
              <a-row
                v-for="i in [0, 1, 2, 3, 4]"
                :gutter="20"
                :style="{ marginBottom: '20px' }"
                :key="i"
              >
                <a-col>
                  <a-card :bordered="true" :style="{ width: '100%' }" hoverable>
                    <a-row
                      style="
                        background-color: #596075;
                        width: 100%;
                        height: 10px;
                      "
                    >
                    </a-row>
                    <a-typography-title :heading="5">
                      {{ qdata[i]?.title }}
                    </a-typography-title>
                    <a-typography-title :heading="6">
                      <a-tag
                        v-for="tag in qdata[i]?.tagList"
                        :key="tag"
                        color="arcoblue"
                        style="margin-right: 5px"
                        >{{ tag }}
                      </a-tag>
                    </a-typography-title>
                    <a-typography-title :heading="7">
                      {{ qdata[i]?.content }}
                    </a-typography-title>
                  </a-card>
                </a-col>
              </a-row>
            </a-card>
          </div>
        </a-col>
        <a-col :span="4">
          <VCalendar :color="selectedColor" :attributes="attrs" />
          <a-card style="margin-top: 20px; width: 250px">
            <a-row style="margin-bottom: 25px">
              <a-col span="12"><MyPieGraph /></a-col>
              <a-col span="12" style="text-align: center; margin-top: 30px">
                <label style="font-size: 20px">总数</label>
                <br /><br />
                <label style="font-size: 20px">1000</label>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="8" style="color: #5571c6">| 未开始</a-col>
              <a-col span="8" style="color: #92cc76">| 进行中</a-col>
              <a-col span="8" style="color: #fac859">| 已完成</a-col>
            </a-row>
            <a-row style="margin-top: 5px">
              <a-col offset="2" span="6" style="color: #5571c6">10</a-col>
              <a-col offset="2" span="6" style="color: #92cc76">20</a-col>
              <a-col offset="2" span="6" style="color: #fac859">30</a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
    </a-layout-content>
    <!--    <a-layout-content :width="300">-->
    <!--      -->
    <!--    </a-layout-content>-->
  </a-layout>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from "vue";
import {
  Question,
  QuestionBank,
  QuestionBankControllerService,
  QuestionControllerService,
  UserControllerService,
} from "../../generated";
import MyCalendar from "@/components/MyCalendar.vue";
import MyPieGraph from "@/components/MyPieGraph.vue";

const pageSize = 16;
let data = ref<Array<QuestionBank>>([]);
let qdata = ref<Array<Question>>([]);
const selectedColor = ref("blue");
const date = new Date();
const signedInfos = ref([]);
const year = date.getFullYear(); //获取完整的年份(4位)
const month = date.getMonth(); //获取当前月份(0-11,0代表1月)
const strDate = date.getDate(); // 获取当前日(1-31)
const attrs = ref([
  {
    key: "test",
    highlight: true,
    dates: [new Date(year, month, strDate)],
  },
  {
    dot: {
      color: "green",
    },
    dates: signedInfos,
    popover: {
      label: "签到成功",
    },
  },
]);

async function questionBankInit() {
  await QuestionBankControllerService.listQuestionBankVoByPageUsingPost({
    pageSize: pageSize,
  }).then((res) => {
    data.value = res.data.records;
  });
}

async function questionInit() {
  await QuestionControllerService.listQuestionVoByPageUsingPost1({
    pageSize: 5,
  }).then((res) => {
    qdata.value = res.data.records;
  });
}

const getDescription = (idx) => {
  return data.value[idx]?.description.length < 10
    ? data.value[idx]?.description
    : data.value[idx]?.description.substring(0, 10) + "....";
};

function calendarInit() {
  UserControllerService.getSignInInfoUsingGet().then((res) => {
    for (const e of res.data) {
      signedInfos.value.push(new Date(new Date().getFullYear(), 0, e));
    }
  });
}
onMounted(() => {
  questionBankInit();
  questionInit();
  calendarInit();
});
</script>

<style scoped>
#homeview {
  text-align: center;
  margin: 0px 50px 0px 100px;
}
</style>
